<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<view v-if="isLogin" class="body">	
			
			<view class="step-bar">
				<view class="fix-wrap">
					<view class="item active">
						<view class="icon iconfont">&#xe8cc;</view>
						<text class="text">基本信息</text>
					</view>
					<view class="item active">
						<view class="icon iconfont f-s38">&#xe621;</view>
						<text class="text">合同</text>
					</view>
					<view class="item active">
						<view class="icon iconfont">&#xec35;</view>
						<text class="text">阶段任务</text>
					</view>
					<view class="item active">
						<view class="icon iconfont">&#xe659;</view>
						<text class="text">回款计划</text>
					</view>
					<view class="item">
						<view class="icon iconfont">&#xeb67;</view>
						<text class="text">发送审批</text>
					</view>
				</view>	
			</view>
			
			<view class="hd-title">
				<view class="title">回款计划</view> 
			</view>
			<view class="project-form-wrap m-b2" v-for="(item,index) in plan.list" :key="index">				
				<view class="form-wrap">
					<view class="step-name">
						<view class="name">{{index+1}}期回款</view>
						<view v-if="index>0" class="del" @click="delCreatedPlan(index)">删除</view>
					</view>
					<view class="form-item">
						<view class="label">回款金额：</view>
						<view class="form-input">
							<view class="content">
								<input type="text" class="inp" v-model="item.amount" placeholder="输入回款金额" />
							</view>				
						</view>			
					</view>   
					<view class="form-item">
						<view class="label">回款比例：</view>
						<view class="form-input">
							<view class="content">
								<input type="text" class="inp" v-model="item.point" placeholder="输入回款比例" />
								<view class="link">%</view>
							</view>				
						</view>			
					</view>   
					
					<view class="form-item">
						<view class="label">回款时间：</view>
						<picker class="form-picker" mode="date" @change="changeDate(index,1,$event)">
							<view class="picker">
								<view class="select-data t-r">
									<text v-if="item.btime">{{item.btime}}</text>
									<text v-else class="f-grey">选择回款时间</text>
								</view>
								<view class="icon">
									<view class="iconfont f-s34">&#xe8d4;</view>
								</view>						
							</view>	
						</picker> 						
					</view>  
					
					<view class="form-textarea-item">
						<view class="label a-t">回款说明</view>
						<view class="form-textarea">
							<textarea class="inp-textarea" v-model="item.desc" placeholder="回款说明(选填)" maxlength="-1"></textarea>
						</view>
					</view> 
				</view> 
			</view>
			
			  
		</view> 
		<view class="footer">
			<view class="fix-wrap created-btn-wrap">
				<view class="btn submit-btn" @click="addPlanData">下一步</view>
				<navigator :url="'/package_project/created_step-5/created_step-5?id='+id" hover-class="none" class="btn next-btn">跳过</navigator>
			</view>
		</view>
		<view class="add-btn" @click="createdPlan"><view class="text">添加</view></view>
	</view>
</template>

<script>
	export default {
		data() {
			return { 
				isIphoneX:getApp().globalData.isIphoneX,
				isLogin:false,
				id:'',
				plan:{
					num: 0,
					list: [{
						pro_id:'',
						amount:'',
						point:'',
						btime:'',
						desc:'',
						isError:true
					}]
				},
				isStop:true
			}
		},
		onLoad(params) {			 
			this.isLogin=this.$loginState('check');
			this.id=params.id; 
			this.plan.list[0].pro_id=this.id;
		},
		methods: {
			
			// 添加回款计划
			createdPlan() {
				this.plan.num += 1;
				this.$set(this.plan.list, this.plan.num, {
					pro_id:this.id,
					amount:'',
					point:'',
					btime:'',
					desc:'',
					isError:true
				})
			},
			
			// 删除
			delCreatedPlan(idx) {
				this.plan.num -= 1;
				this.plan.list.splice(idx, 1);
			},
			 
			// 选择日期
			changeDate(idx,type,e){ 
				if(type==1){
					this.plan.list[idx].btime=e.target.value;
				} 
			},
			
			async addPlanData(){ 
				for(let i in this.plan.list){
					if(this.plan.list[i].amount=='' || this.plan.list[i].btime=='' || this.plan.list[i].desc==''){
						this.$showToast({
							title:'请填写完整信息在提交',
							duration:1000,
						})  		 
						this.plan.list[i].isError=false;
						return
					}else{
						this.plan.list[i].isError=true;
					}
				}
				 
				if(this.isStop){
					this.isStop=false;
					let res=await this.$api.user_api.addPromonback({
						addata:JSON.stringify(this.plan.list)
					});
					if(res.data.code==200){
						this.$showToast({
							icon:'success',
							title:'上传成功',
							duration:1000,
						}).then(()=>{
							setTimeout(()=>{
								uni.redirectTo({
									url: '/package_project/created_step-5/created_step-5?id=' + this.id
								}) 
							},1000)
						})
						this.isStop=true;
					}else{
						this.isStop=true;
						this.$showToast({
							icon:'error',
							title:res.data.msg,
							duration:1000,
						})
					} 
				}
				
			}
			
			
		}
	}
</script>

<style lang="less" scoped>
	.upload-area{
		padding: 20rpx;
		background: #fff;
		.icon{
			margin-bottom: 40rpx;
			text-align: center;
			font-size: 160rpx;
			color:#0099ff;
		}
		.btn{
			width: 50%;
			height: 70rpx;
			line-height: 70rpx;
			margin: 0 auto;
			background: #09f;
			border-radius: 8rpx;
			color:#fff;
			font-size: 30rpx;
			text-align: center;
			
		}
	}
	.hd-title{
		display: flex;
		justify-content: space-between;
		margin:0 20rpx 20rpx;		
		.title{
			padding-left:20rpx;
			border-left: 8rpx solid #0099ff;
			font-size: 30rpx;
			font-weight: bold;
		}
		
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		right:20rpx;
		bottom:180rpx;
		width: 100rpx;
		height:100rpx;
		text-align: center; 
		background: #09f;
		box-shadow: 0 0 10rpx #09f;
		border-radius: 50%;
		color:#fff;
		font-size: 28rpx;
		.text{
			width: 70rpx;
		}
	}
	.step-name{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.name{
			padding:20rpx;
			font-size: 30rpx;
			font-weight: bold;
		}
		.del{
			margin-right: 20rpx;
			color:#09f;
			font-size: 28rpx;
		}
		
	}
	.created-btn-wrap{
		display: flex;
		.btn{
			height: 80rpx;
			line-height: 80rpx;
			margin: 10rpx 10rpx 0;
			flex-grow: 1;
			border-radius: 8rpx;
			text-align: center;
			font-size: 30rpx;
			color:#fff;
		}
		.next-btn{
			background: #ff9600; 
		}
		.submit-btn{
			background: #0099ff; 
		}
	} 
	.step-bar{
		height: 90rpx;
		margin-bottom: 20rpx;
		.fix-wrap{
			display: flex;
			height: 90rpx;
			background: #fff;
		}
		.item{
			flex-grow: 1;
			width: 25%;
			text-align: center;
			color:#999;
			.text{
				font-size: 28rpx;				
			}
			.icon{
				width: 40rpx;
				height: 40rpx;
				margin:0 auto 0; 
			}
		}
		.active{
			.text,.icon{
				color:#09f;				
			} 
		}
	}
</style>
